<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>车标定位</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script src="/jquery/js/jquery-1.8.2.js"></script>
<script src="/jquery/js/jquery-ui-1.9.0.custom.min.js"></script>
		<link rel="stylesheet" href="/jquery/css/ui-lightness/jquery-ui-1.9.0.custom.css" />
  </head>
  <script type="text/javascript">
  function getTop(height){
	var windowheight=window.innerHeight;
	return (windowheight-height)/2;
}
function getLeft(width){
	var windowwidth=window.innerWidth;
	return (windowwidth-width)/2;
}
function change(id){
alert(id);
  $("#autoLogosDiv").dialog({
	//$("#register-form").dialog({
		 resizable:false,
   	  //show: "slide",
   	  autoOpen:true,
         module : true,
         width:400,
         height:400,
         position:[getLeft(600),getTop(400)],//定位
         title: "车标定位",
         open:function(){
	         $.post(
			   "productInfo",
			   {"id":id},
			    function(data){
			    var name = data.product.name;
			    var html = data.product.describe;
			    json = data.product.autoLogos;
			   var obj = JSON.parse(json);
				var top1 = obj.top;
				var left = obj.left;
				var width = obj.width;
				var height = obj.height;
				$("#left").val(left);
				$("#top").val(top1);
				$("#width").val(width);
			   // $("#height").val(wid);
 		   });
	       		
         },
         close: function(event, ui){
       	  		
         },
         buttons:{
       	  '提交' :function(){
       	  var left = $("#left").val();
       	  var top = $("#top").val();
       	  var width = $("#width").val();
       	  $.post(
	       	  "changePosition",
	       	  {"left":left,"top":top,"width":width,"height":width,"id":id},
	       	  function(data){
	       	    location.href = "showAllProducts";
	       	  });
       	  },
       	  '取消':function(){
       		  $(this).dialog('close');
       	  }
         },
	 });
}
  </script>
  <body>
  
    <div style="text-align: center;">
	  <ul style="">
		  <c:forEach items="${products}" var="product">
		    <li style="list-style: none;float: left;">
		    <table style="border:25px solid white;" >
			    <tr>
			   	 <td colspan="2">
			   	 <img alt="" src="${product.newUrl }" width="250px;" style="text-align: center;">
			   	 </td>
			    </tr>
			    <tr>
			   	 <td style="font-size: 30px;">${product.name}</td>
			   	 <td><a href="javascript:void()" onclick="change(${product.id})">车标定位</a></td>
			    </tr>
		    </table>
		    
		    </li>
		  </c:forEach>
	  </ul>
    </div>
    <div id="autoLogosDiv" style="display: none;">
    
       left:<input type="text" id="left"/><br><br/>
       top:<input type="text" id="top"/><br/><br/>
       height:<input type="text" id="width"/><br/><br/>
      
    </div>
  </body>
</html>
